<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	    <link rel="stylesheet" type="text/css" href="css/liupai.css"/>
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	    <script src="flexible/flexible.debug.js"></script>
	</head>
	<body>
			 <!--头部-->
		<div class="header">
			<h3>准备录制</h3>
			<p>提示：自有录音后可进行变声和配乐，快速生成有趣的回声或魔性铃声</p>
		</div>
		<!--按钮-->
		<div class="anniu">
			<p><img src="img/images/yinyu1.png"/></p>
			<div class="an">
				<button id="btn"></button>
			</div>
		</div>
		<!--操作按钮-->
		<div class="caozuo">
			<ul>
				<li class="lv">录音传歌</li>
				<li class="pai">拍摄MV</li>
				<li class="chang">翻唱歌曲</li>
			</ul>
		</div>
		 <!--尾部-->
		<div class="tail">
		  	<ul>
		  		<li><a href="sytuichu.html"><img src="img/images/首页.png"/></a></li>
		  		<li><a href="liupai.html"><img src="img/images/Category.png"/></a></li>
		  		<li><a href="index.html"><img src="img/images/add.png"></a></li>
		  		<li><a href="haoyouquan.html"><img src="img/images/atm-away.png"></a></li>
		  		<li><a href="wode.html"><img src="img/images/account.png"></a></li>
		  	</ul>
	    </div>
	    
	    <!--拍摄MV-->
	    <div class="mv">
	    	<div class="mv-top">
		    	<span><img src="img/images/jiantou.png"/></span>
		    	<h3>选择背景音乐</h3>
		    	<p>直接开拍</p>
	        </div>
	       <!--输入--> 
	       <div class="shuru">
	       	 <input type="text" id="txt" value="" /><span>搜索</span>
	       </div> 
	       <!--菜单-->
	       <div class="xuanxiang">
	       	<dl>
	       		<dt><img src="img/images/chang1.png"/></dt>
	       		<dd>流行</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang2.png"/></dt>
	       		<dd>民谣</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang3.png"/></dt>
	       		<dd>电子</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang4.png"/></dt>
	       		<dd>爵士</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang5.png"/></dt>
	       		<dd>摇滚</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang4.png"/></dt>
	       		<dd>轻音乐</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang5.png"/></dt>
	       		<dd>古典</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang2.png"/></dt>
	       		<dd>嘻哈</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang1.png"/></dt>
	       		<dd>3D</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang3.png"/></dt>
	       		<dd>趣味</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang2.png"/></dt>
	       		<dd>二次元</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang1.png"/></dt>
	       		<dd>台词诗句</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang5.png"/></dt>
	       		<dd>电台</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang4.png"/></dt>
	       		<dd>原创翻唱</dd>
	       	</dl>
	       	<dl>
	       		<dt><img src="img/images/chang3.png"/></dt>
	       		<dd>其他</dd>
	       	</dl>
	       </div>
	      <!--推存-->
	      <div class="tuicun">
	      	<div class="tu-top">
	      		<p>推荐</p>
	      		<p>热门</p>
	      		<p>我喜欢的</p>
	      	</div>
	      	<!--<div class="bofang">
		  		<div class="bo-left">
		  			<img src="img/images/tui1.png"/>
		  		</div>
		  		<h3>当小黄人学狐狸叫</h3>
		  		<p class="guan1">--yi</p>
		  		<h4 class="guan2">04:15 <span>使用</span></h4>		  		
		  	</div>-->
	   	      	
	      </div>   
	    </div>
	    
	    <!--翻唱歌曲-->
	     <!--输入--> 
	    <div class="fanchang">
	     	<div class="qu">
	       	 <span>取消</span><input type="text" id="txt" value="" />
	        </div>
	     <!--类型-->   
	      <div class="leixing">
	      	<ul>
	      		<li class="gesh">推荐</li>
	      		<li class="gs">歌手</li>
	      		<li class="fenl">分类</li>
	      		<li class="yidian">已点</li>
	      	</ul>
	      </div>  
	      <!--推荐热歌榜-->  
	     <div class="gebang">
	     	<div class="ge-top">
	     		<p>推荐热歌榜</p>
	     	</div>
	     	<!--<div class="gechang">
	     		<div class="ge-left">
		  			<img src="img/images/tui1.png"/>
		  		</div>
		  		<h3 class="huang">Promise <span>-黄子韬</span></h3>
		  		<p class="dian">4:00 <span class="spn1">5.7M</span><span class="spn2">播放:211</span></p>
		  		<h4 class="sy">使用</h4>		
	     	</div>-->
	      </div>   
	                
	    </div>
	       
	    <!--歌手-->
	    <div class="geshou">
	    	<div class="singer">
		    	<div class="celebrity-top">
			  		<p>热门歌手</p>		  		
			  	</div>
			  	<dl>
			  		<dt><img src="img/images/deng1.png"/></dt>
			  		<dd>邓紫棋</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng2.png"/></dt>
			  		<dd>陈粒</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng3.png"/></dt>
			  		<dd>张大伟</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng4.png"/></dt>
			  		<dd>周杰伦</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng5.png"/></dt>
			  		<dd>血之谦</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng6.png"/></dt>
			  		<dd>田馥甄</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng7.png"/></dt>
			  		<dd>陈奕迅</dd>
			  	</dl>
			  	<dl>
			  		<dt><img src="img/images/deng8.png"/></dt>
			  		<dd>郁可唯</dd>
			  	</dl>
		    </div>
		    <div class="language">
		    	<p>华语男歌手</p>
		    </div>
		    <div class="language">
		    	<p>华语女歌手</p>
		    </div>
		    <div class="language">
		    	<p>华语乐队组合</p>
		    </div>
		    
	    </div>
	    
	   <!--分类-->
	    <div class="fenlei">
	    	<div class="fen-top">
	    		<div class="zuo">
	    			<img src="img/images/lei1.png"/>
	    		</div>
	    		<div class="you">
	    			<p class="geming1">1. 放<span>-许魏洲</span></p>
	    			<p class="geming2">2. 来自天堂的魔鬼<span>-邓紫棋</span></p>
	    			<p class="geming3">3. 传说<span>-杨千婵</span></p>
	    		</div>
	    	</div>
	    	<div class="fen-top">
	    		<div class="zuo">
	    			<img src="img/images/lei2.png"/>
	    		</div>
	    		<div class="you">
	    			<p class="geming1">1. 同桌的你<span>-老狼</span></p>
	    			<p class="geming2">2. Not Ready<span>-邓紫棋</span></p>
	    			<p class="geming3">3. 乡间的风<span>-德德玛</span></p>
	    		</div>
	    	</div>
	    	<div class="fen-top">
	    		<div class="zuo">
	    			<img src="img/images/lei3.png"/>
	    		</div>
	    		<div class="you">
	    			<p class="geming1">1. To Make<span>-The Aifee</span></p>
	    			<p class="geming2">2. SKIP<span>-TAHlTl</span></p>
	    			<p class="geming3">3. DRANK IN MY<span>-Kirk</span></p>
	    		</div>
	    	</div>
	    </div>
	    <!--已点-->
	    <div class="dianji">
	    	<img src="img/images/dianji.png"/>
	    	<p>您还没演唱过任何歌曲哦！</p>
	    </div>
	    
	    
	    
	    
	    <script src="js/jquery-3.2.1.js"></script>
	    
	    <script>
	    	var tuicun = document.getElementsByClassName('tuicun')[0];
	    	function all(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr=new XMLHttpRequest();
				}else{
					xhr=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("GET","json/liupai.json")
				xhr.onreadystatechange=function(){
					if(xhr.readyState===4&&xhr.status===200){
						var _html="";
						var res=JSON.parse(xhr.responseText)
						for(var i=0;i<res.length;i++){
							_html+='<div class="bofang"><div class="bo-left"><img src="'+res[i].imgurl+'"/></div><h3>'+res[i].name+'</h3><p class="guan1">'+res[i].inner+'</p><h4 class="guan2">'+res[i].num+'<span>'+res[i].spone+'</span></h4></div>';
						}
						tuicun.innerHTML +=_html;
					}
				}
				xhr.send();
			}
			all();
			
			
//			推荐热歌榜
			var gebang = document.getElementsByClassName('gebang')[0];
	    	function gequ(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr=new XMLHttpRequest();
				}else{
					xhr=new ActiveXObject("Microsoft.XMLHTTP");
				}
				xhr.open("GET","json/gequ.json")
				xhr.onreadystatechange=function(){
					if(xhr.readyState===4&&xhr.status===200){
						var _html="";
						var res=JSON.parse(xhr.responseText)
						for(var i=0;i<res.length;i++){
							_html+='<div class="gechang"><div class="ge-left"><img src="'+res[i].imgurl+'"/></div><h3 class="huang">'+res[i].name+'<span>'+res[i].inner+'</span></h3><p class="dian">'+res[i].num+'<span class="spn1">'+res[i].spone+'</span><span class="spn2">'+res[i].fuang+'</span></p><h4 class="sy">'+res[i].yong+'</h4></div>';
						}
						gebang.innerHTML +=_html;
					}
				}
				xhr.send();
			}
			gequ();
			
	    </script>  
	      	
	      
	    <script>
	    	$(function(){
	    		$('.pai').click(function(){
					$('.mv').show();
					$('.fanchang').hide();
					$('.geshou').hide();
					$('.fenlei').hide();
					$('.dianji').hide();
				})
				$('.lv').click(function(){
					$('.mv').hide();
					$('.fanchang').hide();
					$('.geshou').hide();
					$('.dianji').hide();
				})
				$('.chang').click(function(){
					$('.fanchang').show();
					$('.mv').hide();
					$('.geshou').hide();
					$('.fenlei').hide();
					$('.dianji').hide();
				})
				$('.leixing ul li').click(function(){
					$('.gesh').removeClass('gesh');
					
				})
				$('.gs').click(function(){
					$('.geshou').show();
					$('.mv').hide();
					$('.fenlei').hide();
					$('.dianji').hide();
				})
				$('.fenl').click(function(){
					$('.fenlei').show();
					$('.geshou').hide();
					$('.dianji').hide();
				})
				$('.gesh').click(function(){
					$('.fenlei').hide();
					$('.geshou').hide();
					$('.dianji').hide();
				})
				$('.yidian').click(function(){
					$('.dianji').show();
					$('.geshou').hide();
					$('.fenlei').hide();
				})
	    	})
	    		    	
	    </script>
	    
	    
	    
	</body>
</html>
